<template>
  <div>
    <template v-if="cover.type === 1">
      <div class="avatar-uploader" @click="uploading()">
        <img
          v-if="cover.images[0] === undefined"
          class="upImg"
          src="@/assets/default.png"
          alt=""
        />
        <img v-else class="upImg" :src="cover.images[0]" alt="" />
      </div>
    </template>
    <template v-else-if="cover.type === 3">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="avatar-uploader"
        @click="uploading(index)"
      >
        <img
          v-if="cover.images[index] === undefined"
          class="upImg"
          src="@/assets/default.png"
          alt=""
        />
        <img v-else class="upImg" :src="cover.images[index]" alt="" />
      </div>
      <!-- <div class="avatar-uploader" @click="uploading">
        <img v-if="images[1] === undefined" class="upImg" :src="image" alt="" />
        <img v-else class="upImg" :src="images[1]" alt="" />
      </div>
      <div class="avatar-uploader" @click="uploading">
        <img v-if="images[2] === undefined" class="upImg" :src="image" alt="" />
        <img v-else class="upImg" :src="images[2]" alt="" />
      </div> -->
    </template>
    <template v-else> </template>
    <!-- 上传图片 -->
    <!-- <upload ref="upload" @father="getUrl"></upload> -->
    <template>
      <el-dialog
        class="upload"
        :visible.sync="dialogVisible"
        width="700px"
        :modal-append-to-body="false"
      >
        <div class="tabs">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane name="first" label="素材库">
              <el-radio-group @change="toggle" v-model="radio">
                <el-radio-button label="全部"></el-radio-button>
                <el-radio-button label="收藏"></el-radio-button>
              </el-radio-group>
              <div class="item" v-if="radio === '全部'">
                {{ imageUrl }}
                <img
                  class="images"
                  @click="cover.images.push(item.url)"
                  :src="item.url"
                  alt=""
                  v-for="(item, index) in imgList.results"
                  :key="index"
                />
              </div>
              <div class="item" v-else>
                <img
                  class="images"
                  @click="cover.images.push(item.url)"
                  :src="item.url"
                  alt=""
                  v-for="(item, index) in imgList.results"
                  :key="index"
                />
              </div>
              <el-pagination
                v-if="pagination.total > 10"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                layout="prev, pager, next"
                background
                :total="pagination.total"
              >
              </el-pagination>
            </el-tab-pane>
            <el-tab-pane class="up" name="second" label="上传图片">
              <el-upload
                class="avatar-uploader"
                name="image"
                action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :headers="headers"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="son">确 定</el-button>
        </div>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import { getImages } from '@/api/sendArticle.js'
import { getUser } from '@/utils/storage.js'
// import upload from '@/views/sendArticle/upload.vue'
export default {
  components: {
    // upload
  },
  props: {
    cover: {
      type: Object
    },
    type: {
      type: Number
    },
    images: {
      type: [Array, String],
      default:
        ''
    }
  },
  data () {
    return {
      dialogVisible: false,
      activeName: 'first',
      radio: '全部',
      imgList: '',
      collect: false,
      // 每页的数量
      per_page: '',
      page: '',
      idx: '',
      edit: '',
      // 页数
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 100
      },
      // 上传图片的地址
      imageUrl: '',
      headers: { Authorization: `Bearer ${getUser().token}` },
      image:
        '',
      items: [1, 2, 3]
    }
  },
  created () {
    this.toggle()
  },
  methods: {
    // 打开upLoad  dialog组件
    uploading (index) {
      this.dialogVisible = true
      window.console.log('item', index)
      if (this.edit === '') {
        this.edit = '添加'
      } else {
        this.edit = '换图'
      }
      this.idx = index
      window.console.log('点击图片了')
      // 点击了哪个就换哪张图片
      this.$emit('uploading', index)
    },
    // 切换全部与收藏事件
    async toggle (val) {
      // window.console.log(val)
      if (val === '收藏') {
        this.collect = true
        // 每次切换回到首页
        this.pagination.currentPage = 1
      } else {
        this.collect = false
      }
      const res = await getImages({
        collect: this.collect,
        per_page: this.pagination.pageSize,
        page: this.pagination.currentPage
      })
      window.console.log('imagse', res)
      this.imgList = res.data
      this.pagination.total = this.imgList.total_count
      // window.console.log(this.pagination.total)
    },
    // 切换最外层的tabs栏
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 页码每页有多少图片
    handleSizeChange (size) {
      console.log(`每页 ${size} 条`)
      this.pagination.pageSize = size
      this.toggle()
    },
    // 当前在多少页
    handleCurrentChange (page) {
      console.log(`当前页: ${page}`)
      this.pagination.currentPage = page
      this.toggle()
    },
    // 获取图片url事件
    handleAvatarSuccess (res) {
      window.console.log('img', res)
      this.imageUrl = res.data.url
      this.image = res.data.url
      if (this.edit === '添加') {
        this.$emit('father', this.image)
        // this.cover.images.push(res.data.url)
      } else {
        this.image = this.cover.images[this.idx]
        this.$emit('father', this.image)
      }
      // 添加到数组
      // window.console.log('imageUrl', this.imageUrl)

      // 传递url到父组件
      // 成功上传图片
      this.$message.success('上传图片成功')
    },
    // 图片格式管理事件
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    son () {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="less">
.avatar-uploader {
  img {
    width: 100%;
    height: 100%;
  }
}
.upload {
  .tabs {
    width: 100%;
    .item {
      height: 220px;
      .images {
        width: 100px;
        height: 100px;
      }
    }
  }
  .up {
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
}
</style>
